<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .layui-input:focus, .layui-textarea:focus{border-color:#1E9FFF!important}
    </style>
</head>
<body>
<div id="body" style="height: 100%;width: 70%;margin-left:auto;margin-right:auto;background-color: #ffffff;text-align: center">
    <div style="font-size: 20px;color: #8D8D8D;margin-top: 20px;margin-bottom: 10px">通过创建或加入队伍完成报名</div>
    <div style="display: inline-block">
        <button class="layui-btn layui-btn-normal" id="create-team">创建队伍</button>
    </div>
    <div style="display: inline-block;margin-left: 20px">
        <button class="layui-btn layui-btn-normal" id="join-team">加入队伍</button>
    </div>
    <div style="margin-top: 20px;display: none" id="create-block">
        <div style="display: inline-block">
            <input placeholder="请输入队伍名" class="layui-input" id="create-team-name">
        </div>
        <div style="display: inline-block">
            <button class="layui-btn layui-btn-normal" id="create">创建</button>
        </div>
    </div>
    <div style="margin-top: 20px;display: none" id="join-block">
        <div style="display: inline-block">
            <input placeholder="请输入队伍名" class="layui-input" id="join-team-name" name="team">
        </div>
        <div style="display: inline-block">
            <button class="layui-btn layui-btn-normal" id="join">加入</button>
        </div>

    </div>
</div>
</body>

<script>
$("#create-team").click(function () {
    $("#join-block").hide();
    $("#create-block").show();
});
$("#join-team").click(function () {
    $("#create-block").hide();
    $("#join-block").show();
});
$("#create").click(function () {
    var data={};
    data.competition_id = getUrlParam("competitionId");
    userInfo = util.getLocalStorage("user");
    data.user_id =userInfo.userId;
    data.user_name = userInfo.userName;
    data.team_name = $("#create-team-name").val().trim();
    util.sendPOST("/create_team",data,function (response) {
        if (response.status){
            $("#comp-info").css("width","100%");
            $("#enroll").hide();
            $("#myteam").show();
            $("#upload").show();
            $("#data").removeClass("layui-this");
            $("#sort").removeClass("layui-this");
            $("#format").addClass("layui-this");
            $("#frame").load("./competition_format.html");
            layer.msg("报名成功",{icon:1});
        }else{
            layer.msg(response.error_desc,{icon:2});
        }
    },function (response) {
        layer.msg("服务端错误",{icon:2});
    });
});
layui.config({
    dir:'/lib/layui/',
    version:false,
    debug:false,
    base:'/lib/layui/lay/modules/'
});
var data={};
layui.use('autocomplete',function () {
    var autocomplete = layui.autocomplete;
    autocomplete.render({
        elem:$('input[name=team]')[0],
        url:'/search_team',
        cache:false,
        template_val:'{{d.teamName}}',
        template_txt:'<div style="float: left;font-size: 10px">{{d.teamName}} <span class="layui-badge layiu-bg-gray" style="margin-left: 15px"> 创建人：{{d.userName}}</span></div>',
        onselect:function (resp) {
            // console.log(resp);
            data.competition_id = getUrlParam("competitionId");
            userInfo = util.getLocalStorage("user");
            data.user_id =userInfo.userId;
            data.user_name = userInfo.userName;
            data.team_id = resp.teamId;
            data.team_name = resp.teamName;
            // console.log(data);
        }
    });
});
$("#join").click(function () {
    console.log(data);
    if (JSON.stringify(data) == "{}"){
        layer.msg("请选择要加入的队伍",{icon:2});
    }else {
        util.sendPOST("/join_team",data, function (response) {
            if (response.status){
                $("#comp-info").css("width","100%");
                $("#enroll").hide();
                $("#myteam").show();
                $("#upload").show();
                $("#data").removeClass("layui-this");
                $("#sort").removeClass("layui-this");
                $("#format").addClass("layui-this");
                $("#frame").load("./competition_format.html");
                data={};
                layer.msg("报名成功",{icon:1});
            }else{
                layer.msg(response.error_desc,{icon:2});
            }

        },function (response) {
            layer.msg("服务端错误",{icon:2});
        });
    }
})

</script>
</html>